@charset "UTF-8";
@import '../mixins/index.scss';

$componentPrefix: initPrefix();

/* #ifndef APP-NVUE */
// 模糊阴影
#{$componentPrefix}shadow-blur {
  position: relative;
  z-index: 0;

  &::before {
    content: '';
    display: block;
    background: inherit;
    filter: blur($ft-point * 5);
    position: absolute;
    width: 100%;
    height: 100%;
    top: $ft-point * 5;
    left: $ft-point * 5;
    z-index: -1;
    opacity: 0.4;
    transform-origin: 0 0;
    border-radius: inherit;
    transform: scale(1, 1);
  }
}

// 翘边阴影 比如：按钮会感觉两边向Z轴弯起
#{$componentPrefix}shadow-warp {
  position: relative;
  box-shadow: 0 0 $ft-point * 5 rgba(0, 0, 0, 0.1);

  &::before,
  &::after {
    position: absolute;
    content: '';
    top: 10 * $ft-point;
    bottom: 15 * $ft-point;
    left: 10 * $ft-point;
    width: 50%;
    box-shadow: 0 15 * $ft-point 10 * $ft-point rgba(0, 0, 0, 0.2);
    transform: rotate(-3deg);
    z-index: -1;
  }

  &::after {
    right: 10 * $ft-point;
    left: auto;
    transform: rotate(3deg);
  }
}
/* #endif */
